<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "海报");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
	body{
		background-image:url("<c:url value='/images/we/invitationIndex/newBackground.png' />");
		background-repeat:no-repeat;
		background-size:100%;
		position: relative;
	}

	.poster{
		width:70%;
		margin-top:2rem;
		box-shadow: 0px 4px 3px #A3f8fb;
	}
	
	.text_title{
		margin:0.5rem 0 0.5rem 0;
	}
	
	.center{
		text-align:center;
	}
	
	
	.select_img{
		width:2.5rem;
	}
	
	.add_text{
		line-height: 1.2rem;
		font-size:0.7rem;
		margin-top:-0.2rem;
		text-align: center;
	}
	.white_background{
		width:80%;
		left:10%;
		top:3rem;
		height:18rem;
		position:absolute;
		z-index:-10;
		background:rgba(255,255,255,0.5);
		box-shadow: 0px 4px 3px #A3f8fb;
	}
	
	.card_box{
		width:70%;
		height:3rem;
		background-color:#FFFFFF;
		margin:0 auto;
	}

	.addCard{
		text-align: center;	
		margin-top:3.5rem;	
		display:none;
	}
	
	.cancelCard{
		text-align: center;	
		display:none;
		margin-top:1rem;
	}
	.btn{
		margin-top:1rem;
		width:75%;
		height:2.2rem;
		font-size:0.8rem;
		line-height: 2.2rem;
		background-color:#1F9FDA;
		border:1px solid #1F9FDA;
		border-radius:0.2rem;
		color:#FFFFFF;
	}
	
	.info_card{
		width:88%;
		height:11rem;
		background:#ffffff;
		position:absolute;
		z-index:5;
		left:6%;
		top:4rem;
		display:none;
		text-align:center;
	}
	
	.cancel_img{
		width:1.2rem;
		float:right;
		margin:0.3rem;
	}
	
	.clear{
		clear: both;
	}
	.info_box{
		width:75%;
		border-bottom: 1px solid #eeeeee;
		margin:0 auto;
		margin-top:0.8rem;
	}
	.info_input{
		font-size:0.8rem;
		width:8rem;
		height:1.3rem;
		padding:0.3rem 0;
		border:0px;
	}
	.info_span{
		font-size:0.8rem;
	}
	.overlay{
		width:100%;
		height:100%;
		position: absolute;
		left:0;
		top:0;
		z-index:4;
		display:none;
		background:rgba(0,0,0,0.7);
	}
	
	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    	color:#DBDBDB;
	}
	input:-moz-placeholder, textarea:-moz-placeholder { 
    	color:#DBDBDB;
	}
	input::-moz-placeholder, textarea::-moz-placeholder { 
   	 	color:#DBDBDB;
	}
	input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    	color:#DBDBDB;
	}
	
	#poster1{
		display: none;
	}
	
	.hide{
		display:none;
	}
</style>
	<input type="hidden" value="${qrCustomer.linkname}" id="refLinkname" />
	<input type="hidden" id="qrUrl" value="${qrUrl}">
	<input type="hidden" id="picPath" value="${picPath}">
	<input type="hidden" id="cardStatus" value="${addCard}">
	<input type="hidden" id="id" value="${qrCustomer.id}">
	<div class="white_background"></div>
	<div class="center">
		<img class="poster" id="poster1" src="<c:url value='/wechat/cust/invitation/qrCode?logo=0&content=${qrUrl}&picPath=${picPath}&addCard=${addCard}&name=${name}&phone=${phone}'/>">
	</div>
	
	<c:if test="${t_shareCode eq '' || t_shareCode==null}">
		<div class="addCard" id="addCard">
			<img class="select_img" id="addCardImg" src="<c:url value='/images/we/invitationIndex/add.png'/>">
			<div class="add_text">添加名片</div>
		</div>
		
		<div class="cancelCard" id="cancelCard">
			<img class="select_img" id="cancelCardImg" src="<c:url value='/images/we/invitationIndex/cancelCard.png'/>">
			<div class="add_text">取消添加名片</div>
		</div>
		
		<div class="overlay">
			<div class="info_card">
				<img class="cancel_img" src="<c:url value='/images/we/invitationIndex/cancel.png'/>">
				<br class="clear"/>
				<div class="info_box" style="margin-top:0.2rem;">
					<span class="info_span">姓名：</span>
					<input class="info_input" type="text" placeholder="请输入姓名" id="name" onBlur="checkName()" value="${qrCustomer.username}"/>
				</div>
				<div class="info_box">
					<span class="info_span">电话：</span>
					<input class="info_input" type="text" placeholder="请输入手机号" id="phone" onBlur="checkPhone()" value="${qrCustomer.phone}" />
				</div>
				<button class="btn" id="comfirm">确定</button>
			</div>
		</div>
	</c:if>
	
	<%-- <div class="guideToShare" style="background: rgba(0, 0, 0, 0.6); position: absolute; top: 0px; left: 0px; text-align: center; z-index: 10;" hidden>
		<div style="text-align: right;padding-right: 1.2rem">
		<img style="width: 260px;" src="<c:url value='/images/we/invitationIndex/guide1.png'/>">
		</div>	
		<img  onclick="closeGuide()" style="width: 100px;padding-top: 30px;padding-left: 30px;" src="<c:url value='/images/we/invitationIndex/guide2.png'/>">
	
	</div> --%>
			
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>

$(function () {
	/* $(".guideToShare").width(window.screen.availWidth);
	$(".guideToShare").height(window.screen.availHeight);
	showGuide(); */
})

/* //显示 引导 遮罩层
	function showGuide() {
		var id = $("#customerId").val();		
		//openDatabase方法打开已经存在的数据库，如果不存在将会创建一个数据库
        var db = window.openDatabase("mydatabase", "1.0", "我的数据库", 20000);       
                    
        //创建数据表
        var sql = "CREATE TABLE  if not exists posterTable (id REAL UNIQUE)";
        db.transaction(function (tx) {
            tx.executeSql(sql,
            []);
        });

        //查数据
       db.transaction(function (tx) {
           tx.executeSql("select * from posterTable where id= ?", 
           [id],
           function(tx,result){ 
        	   if(result.rows.length==1){
        		   $(".guideToShare").hide();
        	   }
			   if(result.rows.length==0){
				   $(".guideToShare").show();
				   db.transaction(function (tx) {
			            tx.executeSql("INSERT INTO posterTable (id) values(?)", 
			            [id],
			            function(tx,result){ }, 
			        	function(tx, error){ });
			        }); 
        	   }
           }, 
       	   function(tx, error){});
       });
	}
//隐藏引导遮罩层
	function closeGuide() {
		$(".guideToShare").hide();
	}
	 */
	

function friend(linkHref,username){
		wx.onMenuShareAppMessage({
		    title: username+'的邀请海报',
		    desc:  username+'邀请您加入普天永利，开启创富之旅。',
		    link:  linkHref,
		    imgUrl: 'http://www.hdoit.com/ares/images/logo.png',
		    success: function () {
		    	
		    },error:function(){
		    }
		});

		wx.onMenuShareTimeline({
			title: username+'邀请您加入普天永利，开启创富之旅。',
			link: linkHref,
			imgUrl: 'http://www.hdoit.com/ares/images/logo.png',
			success: function (res) {
			}
		});
}
		$(function(){
			
			var shareCode = $.getUrlParam('shareCode');
			var userIdentity="${userIdentity}";
			
			var linkHref=location.href.split('#')[0];
			var href=encodeURIComponent(linkHref);
			
			var url=$.getVirtualPath()+"/wechat/cust/personCenter/shareSignature";
			var shareCodeParam=$.isNull(shareCode)?"":"&shareCode="+shareCode;
			var resultJson=$.getJsonPost(url,"href="+href+shareCodeParam);
			
			var username=$("#refLinkname").val();
			var addCard = $("#cardStatus").val();
			
			if($.isNull(shareCode)){
				linkHref=linkHref.appendUrlParam("shareCode="+userIdentity);
			}
			if(!$.isNull(username)){
				username = resultJson.customer.linkname;
			}
			$("#poster1").load(function(){
				$("#poster1").show();
				$("#addCard").show();
			});
			$("#addCardImg").click(function(){
				$(".info_card").show();
				if($("#poster2").length>0){			
					$("#poster1").hide();
					$("#poster2").show();
					$("#cardStatus").val("true");
					$("#addCard").hide();
					$("#cancelCard").show();
					linkHref=linkHref.appendUrlParam("addCard=true");
					linkHref=linkHref.appendUrlParam("name="+$("#name").val());
					linkHref= linkHref.appendUrlParam("phone="+$("#phone").val());
					friend(linkHref, username);
				}else{
					$(".overlay").show();
				}
			});
			
			$(".cancel_img").click(function(){
				$(".overlay").hide();
			});
			
			var qrUrl = $("#qrUrl").val();
			var picPath = $("#picPath").val();
			$("#comfirm").click(function(){
				if(!checkInput()){
					return false;
				};				
				var name = $("#name").val();
				var phone = $("#phone").val();
				var url = $.getVirtualPath()+"/wechat/cust/invitation/qrCode?logo=0&content="+qrUrl+"&picPath="+picPath+"&addCard=true"+"&name="+name+"&phone="+phone;
				
				var insetHtml = "<img class='poster hide' id='poster2' src="+url+">";
				$("#poster1").hide();
				$(".overlay").hide();
				$("#addCard").hide();
				$("#poster1").after(insetHtml);
				$("#poster2").load(function(){
					$("#poster2").show();
					$("#cancelCard").show();
					$("#cardStatus").val("true");
					linkHref=linkHref.appendUrlParam("addCard=true");
					linkHref=linkHref.appendUrlParam("name="+$("#name").val());
					linkHref= linkHref.appendUrlParam("phone="+$("#phone").val());
					friend(linkHref, username);
				});	
			});
			
			$("#cancelCardImg").click(function(){
				$("#poster2").hide();
				$("#poster1").show();
				$("#addCard").show();
				$("#cardStatus").val("false");
				$("#cancelCard").hide();
				linkHref=linkHref.appendUrlParam("addCard=false");
				friend(linkHref, username);
			});
		
			
			
			var config={
					debug: false,
				  	appId: resultJson.jsapiSignature.appId,// 公众号的唯一标识
				  	timestamp: resultJson.jsapiSignature.timestamp,// 生成签名的时间戳
				  	nonceStr: resultJson.jsapiSignature.nonceStr,// 生成签名的随机串
				  	signature: resultJson.jsapiSignature.signature,// 签名
				  	jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
				}
			
			wx.config(config);
			
			// 微信事件
			wx.ready(function () {
				
				friend(linkHref, username);

				// 微信错误处理机制
				wx.error(function (res) {
					console.log(res.errMsg);
				});
				
			});
			
		});
		
			
			function checkName(){
				var name = $("#name").val();
				if($.isNull(name)){
					$.toptip("请输入姓名","error");
					return false;
				}
				return true;
			}
			
			function checkPhone(){
				var phone = $("#phone").val();
				if($.isNull(phone)){
					$.toptip("请输入手机号码","error");
					return false;
				}
				return true;
			}
			
			function checkInput(){
				if(!(checkPhone()&&checkName())){
					return false;
				}
				return true;
			}
</script>

<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>